<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
	<style>
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        body{
            background-color: white;
        }
        header{
            background-image: url("../image/main/tabBarBackground.png");
            background-size: 100% auto;
            background-repeat:no-repeat;
            background-position:top;
            border-style: solid;
            border-bottom-width: 0.01rem;
            border-color: #F6F6F6;
        }
        header ul li{
            /*height: 1.20rem;*/
            height: 0.54rem;
            display: none;
        }
        header ul li.active{
            display: block;
        }
        .headerSwitch{
            width: 1.00rem;
            height: 100%;
            font-size: 0.16rem;
            color: #FFFFFF;
        }
        .headerSwitch.active{
            width: 1.00rem;
            height: 100%;
            font-size: 0.20rem;
            color: #FFFFFF;
            font-weight: 600;
            background-size: 0.26rem 0.10rem;
            background-image: url(../image/main/headerSelected.png);
            background-repeat: no-repeat;
            background-position: bottom center;
        }
        #footer{  background-image: url("../image/main/tabBarBackground.png"); background-size: 100% auto; box-shadow: 0 -3px 20px 0 rgba(37,61,121,0.13); }
        #footer ul li{ padding-top: 0.42rem; padding-bottom: 0.33rem; background: url() no-repeat center 0.10rem; background-size: 0.38rem 0.56rem; text-align: center; color: #626A7D; font-size: 0.11rem; }
        #footer ul li.active{ color: #4E81FB; }
        #footer ul li:nth-child(1){ background-image: url(../image/main/bottombtn0102.png); }
        #footer ul li:nth-child(2){ background-image: url(../image/main/bottombtn0202.png); }
        #footer ul li:nth-child(3){ background-image: url(../image/main/bottombtn0302.png); }
        #footer ul li:nth-child(4){ background-image: url(../image/main/bottombtn0402.png); }
        #footer ul li:nth-child(5){ background-image: url(../image/main/bottombtn0502.png); }
        #footer ul li:nth-child(1).active{ background-image: url(../image/main/bottombtn0101.png); }
        #footer ul li:nth-child(2).active{ background-image: url(../image/main/bottombtn0201.png); }
        #footer ul li:nth-child(3).active{ background-image: url(../image/main/bottombtn0301.png); }
        #footer ul li:nth-child(4).active{ background-image: url(../image/main/bottombtn0401.png); }
        #footer ul li:nth-child(5).active{ background-image: url(../image/main/bottombtn0501.png); }
        .not-active {
            display: none;
        }
	</style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
    <header>
        <ul>
            <li class="border-b active">
                <div class="flex" style="width: 100%; height: 0.54rem; justify-content: space-around; align-items: center;">
                    <div class="flex headerTools headerSwitch active" style="justify-content: center; align-items: center" tapmode="hover" onclick="headerSwitchBtn( this, 'tools', 5 );">
                        <p>今日运势</p>
                    </div>
                    <div class="flex headerTools headerSwitch" style="justify-content: center; align-items: center" tapmode="hover" onclick="headerSwitchBtn( this, 'tools', 6 );">
                        <p>八字算命</p>
                    </div>
                    <div class="flex headerTools headerSwitch" style="justify-content: center; align-items: center" tapmode="hover" onclick="headerSwitchBtn( this, 'tools', 7 );">
                        <p>宝宝起名</p>
                    </div>
                </div>
            </li>
            <li class="border-b">
                <div class="flex" style="width: 100%; height: 0.50rem; justify-content: space-around; align-items: center;">
                    <div class="flex headerTrain headerSwitch active" style="justify-content: center; align-items: center" tapmode="hover" onclick="headerSwitchBtn( this, 'train', 8 );">
                        <p>图文</p>
                    </div>
                    <div class="flex headerTrain headerSwitch" style="justify-content: center; align-items: center" tapmode="hover" onclick="headerSwitchBtn( this, 'train', 9 );">
                        <p>视频</p>
                    </div>
                    <div class="flex headerTrain headerSwitch" style="justify-content: center; align-items: center" tapmode="hover" onclick="headerSwitchBtn( this, 'train', 10 );">
                        <p>直播</p>
                    </div>
                </div>
            </li>
            <li class="border-b">
                <div class="flex" style="width: 100%; height: 0.50rem; justify-content: center; align-items: center;">
                    <p style="font-size: 0.18rem; color: white; line-height: 0.54rem">医道问诊</p>
                </div>
            </li>
            <li class="border-b">
                <div class="flex" style="width: 100%; height: 0.50rem; justify-content: center; align-items: center;">
                    <p style="font-size: 0.18rem; color: #26344C; line-height: 0.54rem">开运好物</p>
                </div>
            </li>
        </ul>
    </header>
    <div id="main" class="flex-con" style="background-color: #F6F7F8">

    </div>
    <div id="footer" class="border-t">
        <ul class="flex-wrap" >
            <li tapmode="hover" onclick="footerSwitchBtn( this );" class="flex-con active" ></li>
            <li tapmode="hover" onclick="footerSwitchBtn( this );" class="flex-con" ></li>
            <li tapmode="hover" onclick="footerSwitchBtn( this );" class="flex-con not-active" id="wz"></li>
            <li tapmode="hover" onclick="footerSwitchBtn( this );" class="flex-con not-active" id="sc"></li>
            <li tapmode="hover" onclick="footerSwitchBtn( this );" class="flex-con" ></li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common/common.js"></script>
<script type="text/javascript">
    var version;
    var eFootLis, eHeaderLis, eHeaderToolsLis, eHeaderTrainLis;
    var headerHeight, mainHeight, headerToolsIndex, headerTrainIndex;
    apiready = function(){
        if ($api.getStorage("version") == 1) {
            $api.removeCls( $api.byId('wz'), 'not-active');
            $api.removeCls( $api.byId('sc'), 'not-active');
        }

        api.setStatusBarStyle({
            style: 'light',
        });
        $api.fixStatusBar( $api.dom('header') );
        $api.fixTabBar($api.byId('footer'));

        eFootLis = $api.domAll('#footer li');
        eHeaderLis = $api.domAll('header li');
        eHeaderToolsLis = $api.domAll('.headerTools');
        eHeaderTrainLis = $api.domAll('.headerTrain');

        headerHeight = $api.dom('header').offsetHeight;
        mainHeight = $api.dom('#main').offsetHeight;
        $api.setStorage('safeArea', api.safeArea.top + 'px');

        exitApp();

        funIniGroup();

        api.addEventListener({
            name: 'reloadMain'
        }, function(ret, err) {
            api.closeFrameGroup({
                name: 'maingroup'
            });
            window.location.reload();
        });
    };

    function funIniGroup(){
        var frames = [];
        //初始化frame
        for (var i = 0,len = 11; i < len; i++) {
            frames.push( {
                name: 'frame'+i,
                url: './frame'+i+'.html',
                // bgColor : "#F6F7F8",
                bgColor : 'rgba(0,0,0,0)',
                bounces:true,
                vScrollBarEnabled:false,
            } )
        }
        //初始化framegroup
        api.openFrameGroup({
            name: 'maingroup',
            scrollEnabled: false,
            rect: {
                x: 0,
                y: headerHeight,
                w: api.winWidth,
                h: mainHeight
            },
            index: 5,
            preload: 10,
            frames: frames
        }, function (ret, err) {

        });
        headerToolsIndex = 5;
        headerTrainIndex = 8;
    }

    function footerSwitchBtn( tag ) {
        // 点击已激活按钮则返回
        if( tag == $api.dom('#footer li.active') )return;

        var y, h, index, tabIndex;
        for (var i = 0,len = eFootLis.length; i < len; i++) {
            if( tag == eFootLis[i] ){
                tabIndex = i;
                if (i < 3) {
                    $api.addCls( eHeaderLis[i], 'active');
                    $api.removeCls( $api.dom('header'), 'not-active');
                    y = headerHeight;
                    h = mainHeight;
                    if (i == 0 || i == 1 || i == 2) {
                        $api.css($api.dom('header'),'background-image: url(../image/main/tabBarBackground.png);');
                    } else {
                        $api.css($api.dom('header'),'background-image: url("");');
                    }
                    $api.addCls( eFootLis[i], 'active');

                    api.setFrameGroupAttr({
                        name: 'maingroup',
                        rect: {
                            x: 0,
                            y: y,
                            w: api.winWidth,
                            h: h,
                        },
                    });
                    if (i == 0) {
                        index = headerToolsIndex;
                    } else if (i == 1) {
                        index = headerTrainIndex;
                    } else {
                        index = i;
                    }
                    api.setFrameGroupIndex({
                        name: 'maingroup',
                        index: index
                    });
                } else if (i == 4) {
                    $api.addCls( $api.dom('header'), 'not-active');
                    y = 0;
                    h = headerHeight + mainHeight;
                    $api.addCls( eFootLis[i], 'active');

                    api.setFrameGroupAttr({
                        name: 'maingroup',
                        rect: {
                            x: 0,
                            y: y,
                            w: api.winWidth,
                            h: h,
                        },
                    });
                    if (i == 0) {
                        index = headerToolsIndex;
                    } else if (i == 1) {
                        index = headerTrainIndex;
                    } else {
                        index = i;
                    }
                    api.setFrameGroupIndex({
                        name: 'maingroup',
                        index: index
                    });
                } else if (i == 3) {
                    api.execScript({
                        frameName: 'frame3',
                        script: 'openYouZan();'
                    });
                }
            }
        }
        for (var a = 0,lena = eFootLis.length; a < lena; a++) {
            if (a < 3 && a != tabIndex && tabIndex != 3) {
                $api.removeCls( eHeaderLis[a], 'active');
            }
            if (tabIndex != 3 && a != tabIndex) {
                $api.removeCls(eFootLis[a], 'active');
            }
        }
    }

    // function footerSwitchBtn( tag ) {
    //     // 点击已激活按钮则返回
    //     if( tag == $api.dom('#footer li.active') )return;
    //
    //     var y, h, index;
    //     for (var i = 0,len = eFootLis.length; i < len; i++) {
    //         if( tag == eFootLis[i] ){
    //             if (i < 4) {
    //                 $api.addCls( eHeaderLis[i], 'active');
    //                 $api.removeCls( $api.dom('header'), 'not-active');
    //                 y = headerHeight;
    //                 h = mainHeight;
    //                 if (i == 0 || i == 1) {
    //                     $api.css($api.dom('header'),'background-image: url(../image/main/mainHeaderBackground.png);');
    //                 } else {
    //                     $api.css($api.dom('header'),'background-image: url("");');
    //                 }
    //             } else {
    //                 $api.addCls( $api.dom('header'), 'not-active');
    //                 y = 0;
    //                 h = headerHeight + mainHeight;
    //             }
    //             $api.addCls( eFootLis[i], 'active');
    //
    //             api.setFrameGroupAttr({
    //                 name: 'maingroup',
    //                 rect: {
    //                     x: 0,
    //                     y: y,
    //                     w: api.winWidth,
    //                     h: h,
    //                 },
    //             });
    //             if (i == 0) {
    //                 index = headerToolsIndex;
    //             } else if (i == 1) {
    //                 index = headerTrainIndex;
    //             } else {
    //                 index = i;
    //             }
    //             api.setFrameGroupIndex({
    //                 name: 'maingroup',
    //                 index: index
    //             });
    //         }else{
    //             if (i < 4) {
    //                 $api.removeCls( eHeaderLis[i], 'active');
    //             }
    //             $api.removeCls(eFootLis[i], 'active');
    //         }
    //     }
    // }

    function headerSwitchBtn( tag, type, index ) {
        switch(type)
        {
            case "tools":
                if( index == headerToolsIndex )return;
                for (var i = 0,len = eHeaderToolsLis.length; i < len; i++) {
                    if( tag == eHeaderToolsLis[i] ){
                        $api.addCls( eHeaderToolsLis[i], 'active');

                        // api.setFrameGroupAttr({
                        //     name: 'maingroup',
                        //     rect: {
                        //         x: 0,
                        //         y: headerHeight,
                        //         w: api.winWidth,
                        //         h: mainHeight,
                        //     },
                        // });
                        api.setFrameGroupIndex({
                            name: 'maingroup',
                            index: index
                        });
                        headerToolsIndex = index;
                    }else{
                        $api.removeCls(eHeaderToolsLis[i], 'active');
                    }
                }
                break;
            case "train":
                if( index == headerTrainIndex )return;
                for (var i = 0,len = eHeaderTrainLis.length; i < len; i++) {
                    if( tag == eHeaderTrainLis[i] ){
                        $api.addCls( eHeaderTrainLis[i], 'active');

                        // api.setFrameGroupAttr({
                        //     name: 'maingroup',
                        //     rect: {
                        //         x: 0,
                        //         y: headerHeight,
                        //         w: api.winWidth,
                        //         h: mainHeight,
                        //     },
                        // });
                        api.setFrameGroupIndex({
                            name: 'maingroup',
                            index: index
                        });
                        headerTrainIndex = index;
                    }else{
                        $api.removeCls(eHeaderTrainLis[i], 'active');
                    }
                }
                break;
        }
    }

    function reloadMain() {
        api.closeFrameGroup({
            name: 'maingroup'
        });
        window.location.reload();
    }

    function hiddenp() {
        $api.addCls( $api.byId('wz'), 'not-active');
        $api.addCls( $api.byId('sc'), 'not-active');
    }

    function showp() {
        $api.removeCls( $api.byId('wz'), 'not-active');
        $api.removeCls( $api.byId('sc'), 'not-active');
    }
</script>
</html>
